<template>
  <!-- 用户模式登录页面 -->
  <div class="margin-top">
    <h1>用户模式</h1>
    <!-- el-form 组件用于登录表单 -->
    <el-form ref="loginForm" :model="loginForm" label-width="80px" class="login-form">
      <!-- 账号输入框 -->
      <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
        <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <!-- 密码输入框 -->
      <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- 登录按钮和注册按钮 -->
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="text" @click="register">注册</el-button>
      </el-form-item>
      <!-- 错误消息提示 -->
      <el-form-item v-if="errorMessage" style="color: red;">{{ errorMessage }}</el-form-item>
    </el-form>
    <!-- 成功消息提示 -->
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'
import { Message } from 'element-ui' // 引入 Message 组件

export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      errorMessage: '',
      message: ''
    }
  },
  methods: {
    async login () {
      try {
        // 发送登录请求到后端API
        const response = await axios.post('/api/user/login', {
          uname: this.loginForm.username, // 修改为uname，与后端DTO对应
          upass: this.loginForm.password // 修改为upass，与后端DTO对应
        })

        if (response.data) {
          // 登录成功处理
          localStorage.setItem('uname', this.loginForm.username) // 保存用户名到本地存储
          Message.success('登录成功') // 使用 Message 组件显示成功提示
          // 假设登录成功后跳转到UserView页面
          await this.$router.push({ path: '/User' })
        } else {
          // 登录失败处理
          Message.error('登录失败，请检查接口')
        }
      } catch (error) {
        // 异常处理
        Message.error('登录失败，请检查账号和密码')
      }
    },
    register () {
      // 跳转到注册页面
      this.$router.push({ path: '/UserRegisterView' })
    }
  }
}
</script>

<style scoped>
.margin-top {
  margin-top: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 95vh;
  padding: 20px;
  /* 背景图片设置 */
  background-image: url('@/assets/自习室.png'); /* 修改为你的图片路径 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
